<template>
  <div class="list">
    <div
      class="list_item"
      v-for="(item, index) in options.remarkList"
      :key="index"
    >
      <img :src="item.img" class="headimg" alt="" />
      <div class="cont">
        <div class="name">
          <span>{{ item.name }}</span>
          <div class="zan">
            {{ item.num
            }}<van-icon name="good-job-o" style="margin-left: 2px" />
          </div>
        </div>
        <div class="text">
          {{ item.cont }}
        </div>
        <img :src="item.reImg" v-if="item.reImg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    view: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    options() {
      return this.view.options || {};
    },
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.list {
  padding: 10px;
  &_item {
    margin-bottom: 20px;

    display: flex;
    .headimg {
      width: 30px;
      height: 30px;
      margin-right: 15px;
      border-radius: 50%;
    }
    .cont {
      width: 100%;
      img {
        height: 150px;
        object-fit: contain;
				margin-top: 10px;
      }
      .name {
        width: 100%;
        display: flex;
        flex: 1;
        justify-content: space-between;
        font-size: 14px;
        .zan {
          display: flex;
          align-items: center;
        }
      }
      .text {
        font-size: 12px;
        margin-top: 10px;
        line-height: 18px;
      }
    }
  }
}
</style>
